<template>
  <div class="container">
    <Row style="height: 100%">
      <i-col span="21" style="height: 100%"> 
        <div class="luckysheet" id="showRow"></div>
      </i-col>
      <i-col span="3" style="height: 100%"> 
        <Card :bordered="false">
            <p slot="title">显示行</p>
            <p>
            <Form :model="formItem" :label-width="80">
                <Form-item label="选择sheet">
                    <Select v-model="formItem.select" placeholder="请选择">
                        <Option value="0">表一</Option>
                        <Option value="1">表二</Option>
                    </Select>
                </Form-item>
                <Form-item label="起始行">
                    <Input v-model="formItem.start" placeholder="请输入"></Input>
                </Form-item>
                <Form-item label="结束行">
                    <Input v-model="formItem.end" placeholder="请输入"></Input>
                </Form-item>
                <Form-item label="">
                    <Button type="primary" @click="fSubmit">提交</Button>
                </Form-item>
            </Form>
            </p>
        </Card>
      </i-col>
    </Row>
  </div>
</template>

<script>
export default {
  name: "showRow",
  data() {
    return {
      options: {
        container: "showRow", // 设定DOM容器的id
        title: "显示行", // 设定表格名称
        lang: "zh", // 设定表格语言
        userImage:
          "https://cdn.jsdelivr.net/npm/luckyresources@1.0.3/assets/img/logo/logo.png", // 头像url
        userInfo: "方云", //用户信息
        data: [
          //数据
          {
            name: "表一",//工作表名称
            color: "",
            index: 1,//唯一id
            status: 1,
            order: 1,
            celldata: [],
            config: {
              rowhidden: {//默认隐藏行,key指定行数即可，value总是为0
                '0': 0,
                '1': 0,
                '2': 0,
                '3': 0,
                '4': 0,
              }
            },
          },
          {
            name: "表二",
            color: "",
            index: 2,
            status: 0,
            order: 2,
            celldata: [],
            config: {
              rowhidden: {//默认隐藏行,key指定行数即可，value总是为0
                '0': 0,
                '1': 0,
                '2': 0,
                '3': 0,
                '4': 0,
              }
            },
          },
        ],
        hook: {}
      },
      formItem: {
        select: "0",
        start: 1,
        end: 2,
      },
    };
  },
  methods: {
      //提交
      fSubmit(){
          var start = this.formItem.start -1,
              end = this.formItem.end -1;
          luckysheet.showRow(start, end, {order:parseInt(this.formItem.select,10)});
      }
  },
  mounted() {
    // 初始化表格
    luckysheet.create(this.options);
  },
};
</script>

<style scoped>
.luckysheet {
  width: 100%;
  height: 100%;
}
</style>
